<template>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div style="display: flex; font-size: 20px; align-items: center; color: white;">后台管理系统</div>
            <div style="flex: 1;"></div>
            <div class="user">
                 <div class="touxiang">
                    <img :src="'http://localhost:8080/files/download/'+data.avatar" style="width: 100%; height: 100%;border-radius: 50%;"/>
                </div>
                <div style="font-size: 20px;">{{ data.name }}</div>
            </div>
        </div>

        <!-- 内容 -->
        <div class="body">
            <!-- 左侧内容 -->
            <div class="left">
                <el-menu 
                router 
                :default-active="router.currentRoute.value.path" 
                style="border: 0;">
                    <el-menu-item index="/manager/home">系统首页</el-menu-item>
                    <el-sub-menu index="1" v-if="data.role==='ADMIN'">
                        <template #title>
                            <el-icon><UserFilled /></el-icon>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
                        <el-menu-item index="/manager/employee">员工信息</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/manager/department">部门信息</el-menu-item>
                    <el-menu-item index="/manager/data">数据统计</el-menu-item>
                    <el-menu-item index="/manager/article">文章管理</el-menu-item>
                    <el-menu-item index="/manager/mine">个人信息</el-menu-item>
                    <el-menu-item index="/login">退出登录</el-menu-item>
                </el-menu>
            </div>
            <!-- 右侧内容 -->
             <div class="right">
                <router-view/>
             </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {UserFilled} from '@element-plus/icons-vue'
import {ref} from 'vue'

const router = useRouter()
let data = ref(JSON.parse(localStorage.getItem('user')))

</script>

<style>
.header{
    background-color: #3c7fff;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 5px;
}

.user{
   display: flex; 
   align-items: center;
}

.touxiang{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.body{
    display: flex;
}

.left{
    width: 200px;
    min-height: calc(100vh - 60px);
    border-right: 1px solid #dddd;
}

.right{
    background-color: #f5f7ff;
    flex:1;
    width: 0;
    padding: 10px;
}
</style>
